<template>
	<view class="page">
		<u-swiper :list="swiper" height="500" img-mode="widthFix" indicator-pos="bottomRight"></u-swiper>
        
		<view class="blockRow u-flex u-row-between">
			<view class="blockContent u-flex u-padding-20">
				<view class="price u-flex" style="align-items:center;">
					<view style="font-size: 28rpx;">拼团价:</view>
					<view>￥{{info.ptPrice}}</view>
				</view>
				<view class="oldprice">
					￥{{info.linePrice}}
				</view>
			</view>
			<view class="u-padding-right-40" style="color: #A66D00;">	
				<view v-if="!info.isMePt">
					<view>拼团优惠</view>
					<view>等你参与</view>
				</view>
				<view v-else>正在拼团</view>
			</view>
		</view>
		<view class="u-padding-20">
			<view class="title u-line-2">{{info.goodsName}}</view>
			<view style="margin-top: 20rpx;">运费:￥{{info.expressFee}}</view>
		</view>

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>


		<!-- <u-cell-group>
			<u-cell-item title="商品运费" :value="" :arrow="false"></u-cell-item>
			<u-cell-item title="商品规格" :value="size" @click="selectSize" v-if="info.spec.length"></u-cell-item>
		</u-cell-group> -->

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>
        
		<view class="mode">
			<view class="navtitle">			
	      	   <u-image src="/static/ptrule.png" width="100" height="30" mode="widhtFix"></u-image>
			</view>
			
		    <view class="u-flex u-padding-20" style="justify-content: space-around;text-align: center;">
				<view>
					<view>参与拼团</view>
					<view class="">
						<text class="txtred">{{info.ctNum}}</text>人成团
					
					</view>
				</view>
				<view>
					<view>{{info.ptNum}}人拼中发货</view>
					<view class="">
						<text class="txtred">{{info.ctNum-info.ptNum}}</text>未中退款
					</view>
				</view>
				<view>
					<view>未拼中获得</view>
					<view class="">
						<text class="txtred">{{info.returnMoney}}</text>金币
					</view>
				</view>
				
			</view>
		</view>
		
		<view style="width: 690rpx;
		text-align: center;margin: auto;color: #A66D00;">拼团商品不支持退换，介意者可选择【直接购买】</view>
		
		
		<view class="mode" v-if="info.ptTeam.length">
			<view class="navtitle1 ">			
		  	   <u-image src="/static/ptproess.png" width="100" height="30" mode="widhtFix"></u-image>
			   <view style="color: #FFFFFF;">
			     <text>{{info.ptTeam.length}}人已拼团</text>
				 <text style="margin-left: 10rpx;">距离拼团成功还差{{info.ctNum-info.ptTeam.length}}人</text>
			   </view> 
			</view>
			<view class="u-flex u-padding-20">	
				<view v-for="(item,index) in info.ptTeam" :key="index">
					<u-image :src="item.headimg" width="60" height="60" shape="circle"></u-image>
				</view>	
			</view>	
		</view>
		

		<view class="">
			<view style="margin:40rpx auto 40rpx auto;width: 140rpx;">

				<u-image src="/static/detailtitle.png" width="140" height="60" mode="widhtFix"></u-image>

			</view>


			<u-parse :html="info.detail"></u-parse>


		</view>



		<view class="navigation">
			<view class="left">
				<view class="item" @click="backHome">
					<u-icon name="home" :size="40"></u-icon>
					<view class="text u-line-1">首页</view>
				</view>

				<view class="item car share" >
					<button open-type="share"></button>
					<u-icon name="share" :size="40"></u-icon>
					<view class="text u-line-1">分享</view>
				</view>

			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="buy(1)">
					<view>￥{{info.price}}</view>
					<view>直接购买</view>
				</view>
				<view class="gray btn u-line-1" @click="buy(0)">
					<view>￥{{info.ptPrice}}</view>
					<view>拼团购买</view>
				</view>
			</view>
		</view>


		<size ref="chilren"></size>
 <Success :isSucess="isSucess" :title="title" :des="des" :detail="detail" :btnTxt="btnTxt" :img="img"></Success>

	</view>
</template>

<script>
	import size from './components/size.vue';
	import Success from '../../pages/teamAtive/components/success.vue';
	export default {
		components: {
			size,
			Success,
		},
		data() {
			return {
				isShare:true,
				count: "",
				size: "请选择规格",
				Sid: "", //规格id
				info: {
					goodsName: "",
					price: "",
					linePrice: "",
					expressFee: '',
					detail: "",
					spec:[]
				},
				swiper: [],
				id: ""
			}
		},
		onLoad(options) {

			if (options.id) {
				this.id = options.id
			}
			if(options.Sid){
				this.Sid=options.Sid
			}
			this.goodsDetail()

		},
		methods: {
			// 1 加入购物车  
			// 2 购买
			// 3 选择规格
			// 5 拼图购买
			addCar() {
				this.$refs.chilren.show = true;
				this.$refs.chilren.statusing = 1;
				setTimeout(() => {
					this.$refs.chilren.info = this.info
				}, 0)
			
			},
			
			buy(e) {
				   this.$refs.chilren.show = true;
				   this.$refs.chilren.current = -1;
				   if(e){
					   // 普通
					 this.$refs.chilren.statusing = 2;
				   }else{
					 this.$refs.chilren.statusing = 5
				   }

				   setTimeout(() => {
					 this.$refs.chilren.info = this.info
				   }, 0)
			},
			selectSize() {
				this.$refs.chilren.show = true;
				this.$refs.chilren.statusing = 3;
				setTimeout(() => {
					this.$refs.chilren.info = this.info
				}, 0)
			},
			goodsDetail() {
				this.$u.post('/api/index/goodsDetail', {
					goods_id: this.id
				}, {}).then(res => {
					this.swiper = res.data.images;
					this.info = res.data;
					
				    if(this.Sid){
					   var specName=this.info.spec.filter(item=>item.id==this.Sid)
					   this.size=specName[0].specName
					}
					
				}).catch(err => {})
			},
			
			
			backHome(){
				uni.switchTab({
					url:"../../pages/index/index"
				})
			},
			goCar(){
				uni.switchTab({
					url:"../../pages/car/index"
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.page{
		padding-bottom: 90rpx;
	}
	.blockRow{	
		height: 120rpx;
		background: linear-gradient(0deg, #FDEDCE, #FDEDCE);
		.blockContent{
			width: 569rpx;
			height: 120rpx;
			
			background: linear-gradient( #FF6450, #FFB850);
			border-radius: 0 200rpx 0 0 ;
		

		}
	
	
		
		
	}
	.mode{
	   width: 690rpx;
	   margin: 40rpx auto;
	   border-radius: 20rpx;
	   box-shadow: 0px 4rpx 6rpx rgba(209, 209, 209, 0.26);
	   color: #A66D00;
	   padding-bottom: 20rpx;
	   .txtred{
		   color: #FF6450;
	   }
	   .navtitle{
	   	 width: 690rpx;
	   	 height: 80rpx;
	     background: linear-gradient(93.95deg, #FFB850 9.35%, #FF6450 99.19%);
	   	 border-radius: 40rpx 40rpx 0px 0px;
		 display: flex;
		 justify-content: center;
		 padding: 30rpx;
	   }
	   .navtitle1{
		   width: 690rpx;
		   height: 80rpx;
		   background: linear-gradient(93.95deg, #FFB850 9.35%, #FF6450 99.19%);
		   border-radius: 40rpx 40rpx 0px 0px;
		   display: flex;
		   justify-content: space-between;
		   padding: 30rpx;
		   align-items: center;
	    }
	   
	}
		
	.share {
		
		position: relative;

		button {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			opacity: 0;
		}
	}

	.title {
		color: #333;
		font-size: 36rpx;
	}

	.price {
		color: #fff;
		font-size: 56rpx;
	}

	.oldprice {
		text-decoration: line-through;
		color: #fff;
		font-size: 28rpx;
		margin-left: 40rpx;
		
	}



	.navigation {
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		align-items: center;
		justify-content: space-between;



		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				padding: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}

			.item:active {
				opacity: 0.6;
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
		
		

			.btn {
			    padding: 10rpx 30rpx;
				color: #ffffff;
				width: 230rpx;
				text-align: center;
			}

			.cart {
				background-color: #FFB850;
				border-radius: 40rpx 0 0 40rpx;
			
			}

			.gray {
				background-color: #FF6450;
				border-radius: 0 40rpx 40rpx 0;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>
